<!DOCTYPE html>
<!-- saved from url=(0052)http://49.233.183.177:8080/addressbook/register.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>注册</title>

  <link href="css/min.css" rel="stylesheet">

</head>

<body class="bg-gradient-primary">

  <div class="container" id="app">

    <div class="card o-hidden border-0 shadow-lg my-5">
      <div class="card-body p-0">
        <!-- Nested Row within Card Body -->
        <div class="row">
          <div class="col-lg-5 d-none d-lg-block bg-register-image"></div>
          <div class="col-lg-7">
            <div class="p-5">
              <div class="text-center">
                <h1 class="h4 text-gray-900 mb-4">创建账号!</h1>
              </div>


                <div class="form-group">
                  <input type="text" class="form-control form-control-user" id="user" v-model.trim="userinfo.name"   name="regist_name" placeholder="注册用户名">
                  <span style="color: #ff0000">{{erro.user}}</span>
                </div>
                <div class="form-group">
                  <input type="text" class="form-control form-control-user"  v-model.trim="userinfo.phone" name="regist_tel" placeholder="注册手机号">
                  <span style="color: #ff0000">{{erro.phone}}</span>
                </div>
                <div class="form-group">
                  <input type="password" id="pass" v-model.trim="userinfo.pass" class="form-control form-control-user"  name="regist_pwd" placeholder="注册密码">
                  <span style="color: #ff0000">{{erro.pass}}</span>
                  <span>{{qiang}}</span>
                </div>
                <div class="form-group">
                  <input type="password" class="form-control form-control-user" v-model.trim="qpass" id="rpass"  name="regist_pwd_con" placeholder="确认密码">
                  <span style="color: #ff0000">{{erro.qpass}}</span>
                </div>
                 <font color="red"></font>
                   <button type="button" class="btn btn-primary btn-user btn-block" @Click="save">注册</button>
                <hr>

              <hr>
              <div class="text-center">
                <a class="small" href="login.html">已有账号? 登录!</a>              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body></html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      userinfo:{},
      erro:{},
      qiang:"",
      qpass:""

    },
    created: function () {

    },
    methods: {

      save:function (){
        var phone=/((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)/;
        var user=/^[\u4e00-\u9fa5]{2,5}$/;
        var pass1=/^\d{6,10}$/;
        var pass2=/^[a-zA-Z]\\w{5,10}$/;
        var pass3=/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{6,10}$/;

        this.erro.user = ""
        /**
         * 先判断用户名 用户名正确后才判断密码 密码正确后判断两次密码是否一致
         */

        if((user.test(this.userinfo.name) == false) || this.userinfo.name == undefined){
          this.erro.user="用户名必须是2-5位中文"
          return;
        }
        else{
          this.erro.user=""
        }
        if(!pass3.test(this.userinfo.pass)){

          if(!pass2.test(this.userinfo.pass)){

            if(!pass1.test(this.userinfo.pass)){

              this.qiang="";
              this.erro.pass="密码至少是六位数字";
              return;
            }
            else{

              this.erro.pass="";
              this.qiang="密码强度低";

            }
          }
          else{
            this.erro.pass="";
            this.qiang="密码强度中等";

          }
        }
        else{
          this.erro.pass="";
          this.qiang="密码强度高";

        }
        if(this.userinfo.pass==this.qpass){

        }else{

          this.erro.qpass="两次密码不一致";
          return;
        }
        if(phone.test(this.userinfo.phone)){
          this.erro.phone="";
        }else{

          this.erro.phone="电话号输入有误";
          return;
        }

        axios.post("http://localhost:8080/user/regist",this.userinfo).then(res=>{
          alert(res.data.message);
        })
      }

    }

  });

</script>